<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/template/TCubeTTATemplate.xhtml">

    <ui:define name="contentInsert">

        <h3><h:outputText value="Reservation By Age" /></h3>
        <br/>
        <p:panel style="background:whitesmoke">
            <h:panelGrid columns="2">
                <h:form>
                    <h:outputText value="Display Options:"/>
                    <h:selectOneMenu value="#{mdsTCubeMB.reservationByAgeChart}"> 
                        <f:selectItem itemLabel="Pie Chart" itemValue="1"/>
                        <f:selectItem itemLabel="Bar Chart" itemValue="2"/>
                        <f:selectItem itemLabel="Column Chart" itemValue="3"/>
                        <p:ajax update="reservationByAgeForm"   
                                listener="#{mdsTCubeMB.chartTypeUpdate()}" />
                    </h:selectOneMenu>
                </h:form>
                <h:form>
                    <h:selectOneMenu value="#{mdsTCubeMB.reservationByAgeTimeWithin}">
                        <f:selectItems value="#{mdsTCubeMB.timeOptions}"/>
                        <p:ajax update="reservationByAgeForm"
                                listener="#{mdsTCubeMB.resByAgeContentUpdate()}"/>
                    </h:selectOneMenu>
                </h:form>
            </h:panelGrid>
        </p:panel>
        <h:form id="reservationByAgeForm">
            <c:if test="${mdsTCubeMB.reservationByAgeChart == 1}">
                <br/>
                <p:pieChart model="#{mdsTCubeMB.reservationByAgeModel}"
                            style="piechartStyle" width="100%" height="400px"/>
            </c:if>
            <c:if test="${mdsTCubeMB.reservationByAgeChart == 2}">
                <br/>
                <p:barChart model="#{mdsTCubeMB.reservationByAgeCartesian}"
                            width="100%" height="500px"
                            titleX="#Reservations" titleY="Age"/>
            </c:if>
            <c:if test="${mdsTCubeMB.reservationByAgeChart == 3}">
                <br/>
                <p:columnChart model="#{mdsTCubeMB.reservationByAgeCartesian}"
                               width="100%" height="400px"
                               titleX="Age" titleY="#Reservations"/>
            </c:if>
        </h:form>
    </ui:define>
</ui:composition>